import React, { useEffect } from 'react';
import useHoxModel from '../../useHoxModel';
import styles from './index.less';
import { AlarmDoorList } from '../../API';
import IconFont from '@/components/IconFont';

const DemoStackedArea: React.FC = () => {
  const { getAlarmDoorList, getRunAlarm, runAlarmList = {} } = useHoxModel((model) => [
    model.runAlarmList,
    model.alarmDoorListLoading,
  ]);
  useEffect(() => {
    getAlarmDoorList();
    getRunAlarm({ page: 1, number: 9999, startTime: 0 });
  }, []);

  const alarmGradeEnum = {
    1: '一级告警',
    2: '二级告警',
    3: '三级告警',
    4: '四级告警',
  };
  const list = runAlarmList?.alarmList || [];
  return (
    <div className={styles['active-alarm-list-wrap']}>
      <div className={styles['title']}>
        <span>活动告警</span>
        <span className={styles['total']}>{`总数:${list.length}`}</span>{' '}
      </div>
      {list.map((item: AlarmDoorList, index: number) => {
        return (
          <div className={styles['active-alarm-list-item']} key={index.toString(36) + index}>
            <div className={styles['icon']}>
              <IconFont type={'icongaojingshebei'} />
            </div>
            <div className={styles['content']}>
              <div className={styles['name-time']}>
                <span className={styles['name']}>{item.deviceName}</span>

                <span className={styles['time']}>{`-${item.startTime}`}</span>
              </div>
              <div className={styles['position']}>{`位置: ${item.areaPath}`}</div>
            </div>
            <div className={styles['alarm-type']}>
              <span>告警等级: </span> <span>{alarmGradeEnum[item.alarmGrade]}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default DemoStackedArea;
